<!--  -->
<template>
  <div id="zi">
    <h1>{{text}}</h1>
    <br/>
    <br/>
    <button @click="btf(2)">+</button>
    <br/>
    <br/>
    <span>父调用子的方法：{{zidata}}</span>
    <br/>
    <br/>
    <button @click="zidiafu">子直接调用父的方法</button>
    <br/>
    <br/>
    <Zizizhujian />
  </div>
</template>

<script>
import Zizizhujian from './zizizhujian' 
export default {
  //子接收父值
  props:{
    text:{
      type:String, //数据类型
      default: '默认的', // 默认值
      required: true // 必传
    }
  },
  data () {
    return {
      zidata:1,
    };
  },
//组件
  components: {
    Zizizhujian
  },
//计算
  computed: {},
//初始化
  mounted(){},
//方法
  methods: {
    btf(a){
      //子传值给父
      this.$emit('zichuanfu',a)
    },
    //父调用子的方法
    fuGetzhi(){
      this.zidata = ++this.zidata;
    },
    //子调用父方法
    zidiafu(){
      //$parent 获取父组件实例
      console.log(this.$parent.fudata);
      this.$parent.fuFunction();
    }
  }
}

</script>
<style lang='scss' scoped>
  #zi{
    background-color: green;
  }
</style>